<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一个本地存储实例</title>
</head>
<body>
  <div class="content">
    <ul>
      <li><input type="text"/> <button id="add"></button></li>
      <li><p class="data"></p></li>
    </ul>
  </div>
  <script>
    var storage = window.localStorage;
    function showStorage(){
      for(var i=0;i<storage.length;i++){
        //key(i)获得相应的键，再用getItem()方法获得对应的值
        document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
      }
    }
    showStorage();

    localStorage.setItem('re1321','21');
    localStorage.setItem('dfd','1');
    localStorage.setItem('sdf','2');
    localStorage.setItem('key','2');

    localStorage.removeItem("key");//删除名称为“key”的信息。
    //localStorage.clear();




    //javascript 封装，面向对象
    //工厂模式
    function createPerson(name, age, job) {
      var o = new Object();
      o.name = name;
      o.age = age;
      o.job = job;
      o.getName = function () {
        return this.name;
      }
      return o;//使用return返回生成的对象实例
    }
    var person = createPerson('Jack', 19, 'SoftWare Engineer');

    //构造函数
    function Person(name,age,job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.getName = function () {
        return this.name;
      }
    }
    var person1 = new Person('Jack', 19, 'SoftWare Engineer');
    var person2 = new Person('Liye', 23, 'Mechanical Engineer');

    /*
      使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

      没有显式地创建对象
      直接将属性和方法赋值给this对象；
      没有return语句；
      此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：

      创建一个对象
      将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
      执行构造函数的代码
      返回该对象
    */

    //原型模式
    function Person(){
    }
    Person.prototype.name = 'Jack';//使用原型来添加属性
    Person.prototype.age = 29;
    Person.prototype.getName = function(){
      return this.name;
    }
    var person1 = new Person();
    alert(person1.getName());//Jack
    var person2 = new Person();
    alert(person1.getName === person2.getName);//true;共享一个原型对象的方法
    //原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个内部指针为：[[prototype]]指向原型对象。




  </script>
</body>
</html>